<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>上海会畅</title>
<!-- 禁用响应式布局   <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="description" content="">
    <meta name="author" content="">
 		<!-- Bootstrap -->
		<link href="${baseUrlStatic}/css/Bootstrap/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
	    body, textarea, input, select, button, label{
		    color: #333333;
		    font-family: Helvetica,STHeiti,"Microsoft Yahei","微软雅黑","宋体";
		    font-size: 14px;
		}
		ol, ul, li {
		    list-style: none outside none;
		}
		#header .wrapper {
		    background: none no-repeat scroll right center #071D2B;
		    height: 80px;
		}
		#navigator .wrapper {
		    background: url("/assets/images/bg/nav.png") repeat-x scroll 0 0 #3897D1;
		    height: 47px;
		    line-height: 47px;
		    position: relative;
		}
		#navigator .dynamic .login {
		    color: #FFFFFF;
		    margin-left: 25px;
		    font-size: 14px;
		}
		#navigator .dynamic .logout {
		    color: #FFFFFF;
		    margin-left: 2px;
		    font-size: 14px;
		}
		
		#navigator .classify {
		    margin-left: 245px;
		    margin-top: -45px;
		}
		#navigator .classify li a {
		    color: #FFFFFF;
		    display: block;
		    font-size: 14px;
		    margin: 0 25px;
		}
		#navigator .region {
		    margin-top: -58px;
		    right: 20px;
		    position:absolute;
		}
		#navigator .region a{
		    color: #FFFFFF;
		}
		#navigator .region .language {
		    margin-left: 35px;
		}
		#content .wrapper {
		    background: none repeat scroll 0 0 #EEEEEE;
		    min-height: 600px;
		    position: relative;
		}
		
		#lside {
		    background: url("${baseUrlStatic}/img/lside.png") repeat scroll 0 0 #4E5862;
		    bottom: 0;
		    float: left;
		    left: 0;
		    position: absolute;
		    top: 0;
		    width: 200px;
		}
		
		#lside .menubar {
		    border-bottom: 1px solid #606972;
		    border-top: 1px solid #383B40;
		    margin-top: 15px;
		}
		
		#lside .menubar li {
		    border-bottom: 1px solid #383B40;
		    border-top: 1px solid #606972;
		    font-size: 14px;
		    line-height: 38px;
		}
		
		#lside .menubar a {
		    color: #FFFFFF;
		    display: block;
		    padding: 0 20px;
		    text-decoration: none;
		}
		#lside .menubar li.cascade,
		#lside .menubar .submenu li span {
			background: none;
		}
		#lside .submenu {
			border-top: 1px solid #383B40;
			display: none;
		}
		
		#lside .submenu li:last-child,
		#lside .submenu li.last-child {
			border-bottom: none;
		}
		#lside .open .submenu {
			display: block;
		}
		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, progress, time, mark, audio, video {
		    background: none repeat scroll 0 0 transparent;
		    border: 0 none;
		    font-size: 100%;
		    outline: 0 none;
		    padding: 0;
		    vertical-align: baseline;
		}
		#lside .menubar li.active a {
			color: #D9FEB0;
			background: #292A2E url(${baseUrlStatic}/img/menu-active.png) 0 0 no-repeat;
		}
		#lside .menubar a:hover {
			color: #D9FEB0;
		}
		
		#footer .wrapper {
		    background: none repeat scroll 0 0 #404348;
		    border-top: 1px solid #828991;
		    line-height: 38px;
		}
		#footer .copy {
		    color: #999999;
		    font-weight: bold;
		    text-align: center;
		    font-size:14px;
		}
		#mainbox {
			margin-left: 200px;
		}
		.formFont{
			font-weight: normal;
		}
		
		.prompt {
		    font-size: 13px;
		    margin-top: 8px;
		}
		.alert {
		    margin-bottom: 0px;
		    padding: 3px;
		}
				
				
    </style>
  </head>

  <body>
	<header id="header">
		<div class="wrapper">
			<a href="/" id="logo">
				<img alt="会畅通讯" src="${baseUrlStatic}/img/logo.png" />
			</a>
		</div>
	</header>
	
	<nav id="navigator">
		<div class="wrapper">
			<div class="dynamic">
				<c:if test="${!empty user}">
					<span class="login"><span class="glyphicon glyphicon-user"></span> &nbsp;欢迎您，${user.userName} </span> 
					<a href="javascript:;" onclick="loginDialog();" class="logout">退出</a>
				</c:if>
				<c:if test="${empty user}">
					<a href="javascript:;" class="login" onclick="loginDialog();"><span class="glyphicon glyphicon-user"></span> 登陆</a>
				</c:if>
			</div>
			<ul class="classify list-inline">
				<li><a href="/system/user/list"><span class="glyphicon glyphicon-book"></span> 即时会议</a></li>
				<li><a href="/system/user/list"><span class="glyphicon glyphicon-calendar"></span> 预约会议</a></li>
				<li><a href="/system/user/list"><span class="glyphicon glyphicon-plus"></span> 会议号加入</a></li>
			</ul>
			<div class="region pull-right">
				<a class="timezone"><i class="icon icon-zone"></i>北京时间</a>
				<span class="language">
					<select>
						<option>中文</option>
					</select>
				</span>
			</div>
		</div>
	</nav>
	
	<div id="content">
		<div class="wrapper">
			<aside id="lside">
				<ul class="menubar">
					<li class="active"><a href="/system/user/list" target="mainframe"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp; 公开会议</a></li>
					<li><a href="/system/user/list" target="mainframe"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp; 偏好设置</a></li>
					<li><a href="/system/user/list" target="mainframe"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp; 支持</a></li>
					<li><a href="/system/user/list" target="mainframe"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp; 用户管理</a></li>
					<li class="cascade"><a href="javascript:;"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp; 会议面板</a>
						<ul class="submenu">
							<li><a href="javascript:;" onclick="loginDialog();">
								<span class="glyphicon glyphicon-book" style="left:20px;"></span> 
								<span style="left:27px;position: relative;">我主持的</span></a></li>
							<li class="last-child"><a href="javascript:;" onclick="loginDialog();">
								<span class="glyphicon glyphicon-book" style="left:20px;"></span> 
								<span style="left:27px;position: relative;">我参加的</span></a></li>
						</ul>
					</li>
					<li><a href="javascript:;" target="mainframe"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp; 帮助</a></li>
					<li class="cascade"><a href="javascript:;"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp; help</a>
						<ul class="submenu">
							<li><a href="/system/help/list"  target="mainframe">
								<span class="glyphicon glyphicon-book" style="left:20px;"></span> 
								<span style="left:27px;position: relative;">我主持的</span></a></li>
							<li class="last-child"><a href="/system/help/list"  target="mainframe">
								<span class="glyphicon glyphicon-book" style="left:20px;"></span> 
								<span style="left:27px;position: relative;">我参加的</span></a></li>
						</ul>
					</li>
				</ul>
			</aside>
			<div id="mainbox">
				<iframe frameborder="0" width="100%" height="600" scrolling="no" src="/jsp/system/main_home.jsp" name="mainframe" ></iframe>
			</div>
		</div>
	</div>
	
    
    <!-- Modal -->
	<div class="modal fade" id="errorMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" style="padding-top: 130px;width: 400px;">
	    <div class="modal-content">
	      <div class="modal-header" style="background-color: #000000;">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #FFFFFF;">&times;</button>
	        <h5 class="modal-title" id="myModalLabel" style="color: #FFFFFF;">登录失败！</h4>
	      </div>
	      <div class="modal-body">
	        &nbsp;&nbsp;${loginStatus}！
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
	    <!-- 登录弹出窗口 -->
	<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" style="padding-top: 80px;width: 500px;">
	  <form class="form-horizontal" role="form" action="/system/login/register" method="post">
	    <div class="modal-content">
	      <div class="modal-header" style="background-color: #99CCFF;">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <span class="modal-title" id="myModalLabel" style="font-size: 16px;">登录</span>
	      </div>
	      <div class="modal-body">
			  <div class="form-group">
			    <label class="col-sm-2 control-label formFont">用户名</label>
			    <div class="col-sm-9">
			    	<input name="userName" type="text" class="form-control" id="userName" placeholder="用户名">
		    	</div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label formFont" for="exampleInputPassword1">密码</label>
			    <div class="col-sm-9">
			    	<input name="passWord" type="password" class="form-control" id="passWord" placeholder="密码">
			    </div>
			  </div>
	      </div>
	      <div class="modal-footer">
	      	<div id="dangerAlert" class="alert alert-danger pull-left" style="display: none;">
			      <strong>Sorry!</strong> 登录失败.
		    </div>
	        <button type="button" class="btn btn-default" onclick="register()">确定 </button>
	      </div>
	    </div><!-- /.modal-content -->
	    </form>
	  </div><!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
    
    <footer id="footer">
		<div class="wrapper">
			<div class="copy"> Copyright © 2003-2013 Works Map Co., Ltd. All right Reserved. 京ICP备 1号-5, 版权所有，盗版必究  <a href="http://www.baidu.com">Made by us.</a> <a href="http://www.google.com.hk">2013.9.1</a></div>
		</div>
	</footer>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
   	<script type="text/javascript" src="${baseUrlStatic}/js/Bootstrap/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${baseUrlStatic}/js/Bootstrap/bootstrap.min.js"></script>
	<script type="text/javascript">
    	$(document).ready(function(){
			var loginStatus = "${loginStatus}";
			if(loginStatus){
				$("#errorMessage").modal('show');
			}
    	});
    	/*
    	// 左侧菜单切换
    	$(document).ready(function() {
    		$(document).on('click', '#lside .menubar li', function(elem) {
    			var href = elem.attr("href");
    			jQuery(this).addClass('active').siblings().removeClass('active');
    			// HACK IE outline
    			jQuery(this).find('a').blur();
    			return false;
    		});
    	});
    	*/
    	
    	// 左侧菜单切换
    	jQuery(document).on('click', '#lside .menubar li', function(elem) {
    		var menu = jQuery(this);
    		if (menu.is('.cascade')) {
    			menu.toggleClass('open');
    		}else {
    			menu.closest('.menubar').find('li').removeClass('active');
    			menu.closest('.menubar').find('.cascade').removeClass('open');
    			menu.closest('.cascade').addClass('open');
    			menu.addClass('active');
    		} 
    		var href = elem.attr("href");
    		// HACK IE outline
    		menu.find('a').blur();
    		return false;
    	});
    	/*
    	// 左侧菜单切换
    	$(document).ready(function() {
    		$(document).on('click', '#lside .menubar li', function() {
    			jQuery(this).addClass('active').siblings().removeClass('active');
    			// HACK IE outline
    			jQuery(this).find('a').blur();
    		});
    	});
    	*/
    	function loginDialog(){
    		$(document).ready(function(){
   				$("#loginModal").modal('show');
   				$("#dangerAlert").hide();
        	});
    	}
    	
    	function register(){
    		var user = {};
    		user.userName = $("#userName").val();
    		user.passWord = $("#passWord").val();
    		user.email = $("#email").val();
    		$.ajax({
                type:"POST",
                url:"/system/user/register",
                data:user,
                dataType:"json",
                success:function(data){
                	var status = data.status;
                	if(status == "success"){
                		$("#dangerAlert").show();
                		document.getElementById("dangerAlert").innerHTML= data.message; 
                	}else{
                		$("#dangerAlert").show();
                		document.getElementById("dangerAlert").innerHTML= data.message; 
                	}
                },
                error:function() {
                	$("#dangerAlert").show();
		        }
            });
    	}
    
    </script>

  </body>
</html>
